{% extends 'base.html' %}
{% load static %}
{% block title %}
首页
{% endblock %}

{% block page-title %}
仪表盘
{% endblock %}
{% block page-content %}
<div class="row">
    <div class="col-lg-3 col-sm-6">
        <div class="widget-panel widget-style-2 white-bg">
            <i class="ion-android-social-user text-pink"></i>
            <h4 class="m-0 counter">{{ overview.task }} 个</h4>
            <div>任务总数</div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="widget-panel widget-style-2 white-bg">
            <i class="fa fa-desktop text-purple"></i>
            <h4 class="m-0 counter">{{overview.machine}} 台</h4>
            <div>资产总数</div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="widget-panel widget-style-2 white-bg">
            <i class="fa fa-tasks text-info"></i>
            <h4 class="m-0 counter">{{overview.disk}} P</h4>
            <div>硬盘容量总数</div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="widget-panel widget-style-2 white-bg">
            <i class="fa fa-tags text-success"></i>
            <h4 class="m-0 counter">{{overview.capacity}} P</h4>
            <div>可提供算力总数</div>
        </div>
    </div>
</div> <!-- end row -->
<div class="row">
    <div class="col-lg-6">
        <div class="portlet">
            <!-- /primary heading -->
            <div class="portlet-heading">
                <h3 class="portlet-title text-dark text-uppercase">
                    算力增长
                </h3>
                <div class="portlet-widgets">
                    <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a>
                    <span class="divider"></span>
                    <a data-toggle="collapse" data-parent="#accordion1" href="#portlet2"><i
                            class="ion-minus-round"></i></a>
                    <span class="divider"></span>
                    <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div id="portlet2" class="panel-collapse collapse in">
                <div class="portlet-body">
                    <div id="user-nums" style="height:400px;"></div>
                </div>
            </div>
        </div> <!-- /Portlet -->

    </div>
    <div class="col-lg-6">
        <div class="portlet">
            <!-- /primary heading -->
            <div class="portlet-heading">
                <h3 class="portlet-title text-dark text-uppercase">
                    任务发布次数
                </h3>
                <div class="portlet-widgets">
                    <a href="javascript:;" data-toggle="reload"><i class="ion-refresh"></i></a>
                    <span class="divider"></span>
                    <a data-toggle="collapse" data-parent="#accordion1" href="#portlet1"><i
                            class="ion-minus-round"></i></a>
                    <span class="divider"></span>
                    <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse in">
                <div class="portlet-body">
                    <div id="task-nums" style="height:400px;"></div>
                </div>
            </div>
        </div> <!-- /Portlet -->

    </div> <!-- end col -->

</div> <!-- End row -->


{% endblock %}
{% block js %}
<script src="/static/assets/echarts/echarts.min.js"></script>
<script src="/static/assets/echarts/theme/macarons.js"></script>
<script>
    var WorkOrderChart = echarts.init(document.getElementById('user-nums'), 'macarons');
    WorkOrderOption = {
        tooltip: {
            trigger: 'axis',
            formatter: "{b0} <br/>{a0} : {c0}"
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: { show: true },  //数据缩放
                dataView: { show: true, readOnly: true },      // 数据视图
                magicType: { show: true, type: ['line', 'bar',] }, //图形切换
                restore: { show: true },           // 数据复原
                saveAsImage: { show: true }        // 图形以图片形式保存到本地
            }
        },
        legend: {
            orient: 'horizontal',
            x: 'left',
            data: ['活跃用户数']

        },
        xAxis: {
            type: 'category',
            data: ['2019-12-02', '2019-12-03', '2019-12-04', '2019-12-05', '2019-12-06', '2019-12-07', '2019-12-08', '2019-12-09']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '算力增长',
            data: [20, 22, 23, 25, 28, 33, 36, 41],
            type: 'line',
            itemStyle: {   // 系列级个性化样式，纵向渐变填充
                normal: {
                    color: '#1ab394'
                }
            },
            smooth: true
        }]
    };
    WorkOrderChart.setOption(WorkOrderOption);
</script>
<script>
    var PostChart = echarts.init(document.getElementById('task-nums'), 'macarons');
    PostOption = {
        tooltip: {
            trigger: 'axis',
            formatter: "{b0} <br/>{a0} : {c0}"

        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: { show: true },  //数据缩放
                dataView: { show: true, readOnly: false },                // 数据视图
                magicType: { show: true, type: ['line', 'bar', 'tiled'] }, //图形切换
                restore: { show: true },           // 数据复原
                saveAsImage: { show: true }        // 图形以图片形式保存到本地
            }
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: ['发布次数']

        },
        xAxis: {
            type: 'category',
            data: ['2019-12-02', '2019-12-03', '2019-12-04', '2019-12-05', '2019-12-06', '2019-12-07', '2019-12-08', '2019-12-09']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '发布次数',
            data: [3, 4, 2, 5, 8, 3, 0, 6],
            type: 'bar',
            smooth: true
        }]
    };
    PostChart.setOption(PostOption);
</script>

{% endblock %}